<template>
    <div>
        <Row class-name="row">
            <Col span="5">
                <label style="font-weight: bold">{{label}}：</label>
            </Col>
            <Col span="12">
                <DatePicker
                        :value="dateRange"
                        format="yyyy-MM-dd HH:mm"
                        type="datetimerange"
                        confirm
                        :placeholder="placeholder"
                        style="width: 260px"
                        @on-change="handleOnChange">
                </DatePicker>
            </Col>
        </Row>
    </div>
</template>

<script>
    export default {
        name: 'DatetimeRange',
        props: {
            label: {
                type: String,
                default: '输入内容'
            },
            placeholder: {
                type: String,
                default: '输入内容'
            },
            startDateTime: {
                type: String,
                default: ''
            },
            endDateTime: {
                type: String,
                default: ''
            }
        },
        computed: {
            dateRange() {
                return [this.startDateTime, this.endDateTime];
            }
        },
        data() {
            return {
                text: '',
            };
        },
        methods: {
            handleOnChange(date) {
                this.$emit('on-range-change', date[0], date[1]);
            }
        },
        watch: {}
    };
</script>

<style scoped>
    .row {
        line-height: 28px;
        height: 28px;
    }
</style>
